<template>
	<view class="area-b">
		<u-navbar title="提现方式"></u-navbar>
		<view class="list">
			<view class="item u-p-30" v-for="(item,index) in wayList" :key="index" @tap="pickWay(item)">
				<view class="avatar">
					<text class="text-blue cuIcon-card u-font-60" v-if="item.extractForm==3"></text>
					<text class="text-blue iconfont icon-alipay u-font-60" v-else-if="item.extractForm==1"></text>
					<text class="text-green iconfont icon-wxpay u-font-60" v-else-if="item.extractForm==2"></text>
					<text class="text-orange iconfont icon-walletfill u-font-60" v-else-if="item.extractForm==4"></text>
				</view>
				<view class="info">
					<view class="u-font-32" v-if="item.extractForm==1">支付宝</view>
					<view class="u-font-32" v-if="item.extractForm==2">微信</view>
					<view class="u-font-32" v-if="item.extractForm==3">银行卡</view>
					<view class="u-font-32" v-if="item.extractForm==4">USDT</view>
					<view class="u-font-26 text-grey">{{item.label}}</view>
				</view>
				<view class="right">
					<view class="iconfont icon-remove u-font-36 text-red" @tap.stop="remove(item,index)"></view>
				</view>
			</view>
		</view>
		<view class="u-p-100">
			
		</view>
		<view class="foot u-p-x-30 u-p-y-20">
			<navigator class="bg-blue radius u-font-32 u-p-20 u-text-center" url="/pages/wallet/editCashWay">
				新增收款方式
			</navigator>
			<view class="area-b">
				
			</view>
		</view>
		<u-modal
			v-model="ask.show" 
			:content="ask.content"
			show-cancel-button
			@confirm="resolve"
			@cancel="reject" 
		/>
	</view>
</template>

<script>
	import {getDict} from "@/api/system.js"
	import {mapGetters} from "vuex"
	import {get as getStorage,set as setStorage} from "@/utils/storage.js"
	import { delay, goback, toast } from "@/utils/util";
	const cacheKey = 'cat_cash_ways_'
	export default {
		data() {
			return {
				wayList:[],
				ask:{
					show:false,
					content:'',
				},
				bridge:null,
				eventChannel:null,
				dictList:[],
			};
		},
		computed:{
			...mapGetters('user',['userId'])
		},
		onLoad() {
			this.eventChannel = this.getOpenerEventChannel();
			getDict('cat_show_withdrawal_method').then((list)=>{
				const dictMap = {
					bank:{
						name:'银行卡',
						value:3,
					},
					USDT:{
						name:'USDT',
						value:4,
					},
					alipay:{
						name:'支付宝',
						value:1,
					},
					weixin:{
						name:'微信',
						value:2,
					}
				}
				this.dictList = list.map(({dictLabel,dictValue})=>({...dictMap[dictLabel],usable:dictValue=='1'}))
			})
		},
		onShow() {
			getStorage(cacheKey+this.userId).then((ways)=>{
				this.wayList = ways||[]
			})
		},
		methods:{
			async pickWay(way){
				if(this.dictList.some(({usable,value})=>value==way.extractForm&&!usable)){
					return toast('当前通道暂停使用，请切换其他通道')
				}
				this.eventChannel.emit('picked',way)
				goback()
			},
			async remove(item,index){
				await new Promise((resolve,reject)=>{
					this.bridge = {
						resolve,
						reject
					}
					this.ask.content = '确认删除吗?'
					this.ask.show = true
				})
				try{
					this.wayList.splice(index,1)
					await setStorage(cacheKey+this.userId,this.wayList)
					toast('删除成功')
				}finally{
					this.lock = false
				}
			},
			resolve(e){
				this.bridge&&this.bridge.resolve&&this.bridge.resolve(e)
			},
			reject(e){
				this.bridge&&this.bridge.reject&&this.bridge.reject(e)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list{
		.item{
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			&+.item{
				margin-top: 2rpx;
			}
		}
		.avatar{
			flex-shrink: 0;
			margin-right: 20rpx;
		}
		.info{
			flex: 1;
			width: 100rpx;
		}
		.right{
			flex-shrink: 0;
			margin-left: 20rpx;
		}
	}
	.foot{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #FFFFFF;
	}
</style>
